<template>
  <div>
    <DialogForm
      v-model="dialogVisible"
      :cancel-button="true"
      :confirm-button="true"
      title="添加用户"
      :confirm-loading="confirmLoading"
      @confirm="confirmHandler"
      @cancel="cancelHandler"
    >
      <template #content>
        <UserBaseForm ref="userBaseForm" v-model="userInfo" :isInsert="true"/>
      </template>
    </DialogForm>
  </div>
</template>

<script>
import DialogForm from '@/components/dialog/DialogForm'
import UserBaseForm from '@/views/permission/user/form/base/UserBaseForm'
import { ref } from 'vue'
import { userInsert } from '@/api/user'
export default {
  name: 'InsertUserForm',
  components: { UserBaseForm, DialogForm },
  setup () {
    return {
      confirmLoading: ref(false),
      dialogVisible: ref(false),
      userInfo: ref({
        username: '',
        nickname: '',
        email: ''
      })
    }
  },
  methods: {
    confirmHandler () {
      this.$refs.userBaseForm.$refs.modifyUserInfoForm.validate((val) => {
        if (val) {
          this.confirmLoading = true
          userInsert(this.userInfo).then((val) => {
            this.confirmLoading = false
            this.dialogVisible = false
          })
          console.log(this.userInfo)
        }
      })
    },
    cancelHandler () {
      // 重置校验
      this.$refs.userBaseForm.$refs.modifyUserInfoForm.resetFields()
    }
  }
}
</script>

<style scoped>

</style>
